<template>
    <div>
        <left-drawer
            :showLeftDraw="showLeftDraw"
            :toggleLeftDraw="toggleLeftDraw"
        />
        <h2 class="module-title">
            模块列表
            <el-button type="text" @click="toggleLeftDraw">添加模块</el-button>
        </h2>
        <div class="module-list">
            <div
                v-for="(v, i) in moduleList"
                :key="v.id"
                @dragstart="handleDragStart(v, $event)"
                draggable="true"
                :class="{
                    'module-item': true,
                    even: i % 2,
                }"
            >
                <div class="module-picture-wrap">
                    <img :src="v.picture" class="module-picture" />
                </div>
                <div class="title">
                    <span class="text1">
                        {{ v.title }}
                    </span>
                    <span class="text2">
                        {{ v.edition }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
const img = new Image();
img.src = "https://gw.alicdn.com/tfs/TB1u9lvGFY7gK0jSZKzXXaikpXa-32-32.png";
img.height = "10px";
import LeftDrawer from "./LeftDrawer";
export default {
    name: "left",
    computed: {
        moduleList() {
            return this.$store.state.config.data.moduleList;
        },
    },
    data() {
        return {
            showLeftDraw: false,
        };
    },
    components: {
        LeftDrawer,
    },
    methods: {
        handleDragStart(item, e) {
            e.dataTransfer.setData("item", JSON.stringify(item));
            e.dataTransfer.setDragImage(img, 0, 0);
        },
        toggleLeftDraw() {
            this.showLeftDraw = !this.showLeftDraw;
        },
    },
};
</script>

<style lang="stylus" scoped>
.module-title {
    text-align: center;
}

.module-list {
    width: 400px;
    display: block;
    justify-content: space-between;
    flex-wrap: wrap;

    .module-item {
        width: 190px;
        border: 1px solid #eee;
        display: inline-block;
        margin-right: 8px;
        margin-bottom: 16px;

        &.even {
            margin-left: 8px;
            margin-right: 0px;
        }

        .module-picture-wrap {
            width: 190px;
            height: 190px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #eee;
        }

        .module-picture {
            max-width: 190px;
            max-height: 190px;
        }

        .title {
            height: 40px;
            line-height: 40px;
            padding: 0 10px;
            display: flex;
            justify-content: space-between;

            .text2 {
                color: #999;
            }
        }
    }
}
</style>
